<script lang="ts" setup>
import { computed } from 'vue'
// props 定义
interface PropsType {
  modelValue: {
    filter?: any
    orderBy?: string
    pageNum: number
    pageSize: number
  }
  pageSize?: number
  pageSizes?: number[]
  total: number
}
const props = withDefaults(defineProps<PropsType>(), {
  pageSize: 20,
  pageSizes: () => [20, 40, 60, 80],
  total: 0,
  modelValue: () => {
    return {
      filter: {
        gjz: '',
      },
      orderBy: '',
      pageNum: 1,
      pageSize: 20,
    }
  },
})
// emit
const emit = defineEmits(['update:modelValue', 'change'])

// 缓存参数
const localParam = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

// 选中页改变
const currentChange = (pageNum: number) => {
  localParam.value.pageNum = pageNum
  emit('change')
}

// 每页大小改变
const sizeChange = (pageSize: number) => {
  localParam.value.pageNum = 1
  localParam.value.pageSize = pageSize
  emit('change')
}
</script>

<template>
  <div class="base-pagination">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      v-model:page-size="localParam.pageSize"
      v-model:current-page="localParam.pageNum"
      :page-sizes="pageSizes"
      :total="total"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>
